@charset'UTF-8';

/**
 * 春节
 * @Author zhangzongzheng
 * @email zhangzongzheng@ymatou.com
 * @Date 2016/01/04
 */

@import'../_components/variables.scss';
@import'../_components/_mixin.scss';
@import'../_components/reset.scss';
@import'../_components/column.scss';
@import'../_components/button.scss';
@import'../assets/ymtUI.scss';
@import'../assets/ymt_components.scss';
@import'../assets/common.scss';
@import'../black_five/_proList.scss';
@import'../assets/_global_good.scss';
@import '../assets/animation/poker.scss';

// $imgPath:'/images/spring_festival/';
$imgPath:'http://staticontent.ymatou.com/images/activity/spring_festival/';

@include productList(#f04528,#f04528);

.sf-container{
    overflow: hidden;
}

.sf-area-hd{
    background-size: contain;
    background-repeat:no-repeat;
}

.sf-goods{
    background:#94efef;
    &-banner{
        background-size:contain;
        background-repeat:no-repeat;
        height: $rem*398;
    }
    &-tab{
        padding:$rem*8 $rem*5;
        background-color: #5bcbcb;
        &-wrapper{
            padding:$rem*8;

        }
        &-hd{
            border:$rem*8 solid #049f9f;
            background:#049f9f;
            border-radius:$rem*20;
            @include clearfix();
            &-item{
                border-radius:$rem*20;
                height:$rem*88;
                line-height:$rem*88;
                color:#fff;
                font-size: $rem*32;
                font-weight: 700;
                float: left;
                width: 33.333333%;
                text-align: center;
                &.active{
                    background:#faf3c4;
                    color:#009797;
                }
            }
        }
    }
    &-sub-tab-wrap {
        position: relative;
        width: 100%;
        height: $rem*100;
        z-index: 999;
    }
    &-sub-tab-hold {
        width: 100%;
        height: $rem*100;
        background-color: #5bcbcb;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        // transform: translate(-25%, 0);
    }
    &-sub-tab{
        width: 100%;
        height: $rem*90;
        position: absolute;
        top: $rem*10;
        &-list{
            @include clearfix();
        }
        &-item{
            float: left;
            // padding: 0 $rem*20;
            width: 33.3%;
            text-align: center;
            border-right: 1px solid #fff;

            &:last-child {
                border: none;
            }
            &>div{
                display: inline-block;
                font-size: $rem*24;
                color:#fff;
                text-align: center;
                font-style: italic;
                padding: $rem*2 $rem*8;
            }
            &.active{
                &>div{
                    background:#faf3c4;
                    color:#049f9f;
                }
            }
        }
    }
}

@include column('.buy-detail-',3,$rem*8);

.class-joint{
    margin-top: $rem*10;
    .sf-area-hd{
        background-size:cover;
        background-repeat:no-repeat;
        transform: translate(0, 1px);
    }
    .bf-list{
        padding:0 $rem*10;
    }
}

#evt-01 .sf-area-hd {
    height: $rem*124;
}

#evt-02 .sf-area-hd {
    height: $rem*114;
}

#evt-03 .sf-area-hd {
    height: $rem*105;
}

.sf-area {
    padding: 0 $rem*10;
    .sf-area-bd-wrap {
        padding: 0 $rem*12;
        background-color: #5bcbcb;
    }

}

.sf-area-1 {
    background-color: #94efef;
    .sf-area-bd {
        background-color: #5bcbcb;
    }
    .sf-area-ft {
        width: 100%;
        height: $rem*83;
        background-image: url(#{$imgPath}/sf_tab03_list_ft01.jpg);
        transform: translate(0, -1px);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.sf-area-2 {
    padding-top: $rem*40;
    background-color: #5bcbcb;
    .sf-area-bd {
        background-color: #0ab2b2;
    }
    .sf-area-ft {
        width: 100%;
        height: $rem*82;
        background-image: url(#{$imgPath}/sf_tab03_list_ft02.jpg);
        transform: translate(0, -1px);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
}

.sf-list {
    .sf-item {
        padding: $rem*26;
        background-color: #fff;
        .pro-wrap {
            .pic {
                width: $rem*600;
                height: $rem*600;
            }
            .info {
                margin-top: $rem*40;
                .national-wrap {
                    font-size: $rem*24;
                    margin-bottom: $rem*10;
                    .national-flag {
                        display: inline-block;
                        width: $rem*25;
                        height: $rem*25;
                        vertical-align: middle;
                        @extend .bg__full;
                    }
                }
                .price-wrap {
                    position: relative;
                    .desc {
                        font-size: $rem*24;
                        max-width: $rem*200;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    .price {
                        font-size: $rem*40;
                        color: #ef2b47;
                    }
                    del {
                        font-size: $rem*24;
                        color: #666666;
                    }
                    .purchase {
                        float: right;
                        color: #fff;
                        width: $rem*288;
                        height: $rem*68;
                        line-height: $rem*68;
                        text-align: center;
                        background: -webkit-gradient(linear, left top, left bottom, from(#f93551), color-stop(0.5, #f93551), color-stop(0.5, #ef2b47), to(#ef2b47));
                        position: absolute;
                        bottom: 0;
                        right: 0;
                    }
                }
            }
        }
    }
}

.sf-swiper{
    overflow: hidden;
    .swiper-wrapper{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: block;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        //white-space: nowrap;
        &_3col{
            .swiper-slide{
                flex-shrink: 3;
            }
        }
    }

    .swiper-slide{
       display:inline-block;
       text-align: center;
       display: -webkit-box;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-shrink: 0;
       position: relative;
    }

}

//必买清单
.buy-detail{
    &-area{
        padding:0 $rem*8;
        margin-top: $rem*160;
        .sf-area-hd{
            height: $rem*106;
            background-position: center;
        }
        .pro-detail{
            margin-top: $rem*15;
            background:#fff;
            border-radius:$rem*8;
            padding:$rem*18 0;
            font-size:$rem*25;
            color:#2c2c2c;
            overflow: hidden;
            .pic{
                width:$rem*236;
                height:$rem*236;
                background-repeat:no-repeat;
                background-size:contain;
            }
            h4{
                padding:0 $rem*14;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
            .price{
                text-align: center;
                color:#ef3b3b;
                strong{
                    font-size:$rem*36;
                }
            }
        }

        .swiper-pagination{
            &-wrapper{
                text-align: center;
            }
            padding:$rem*10 $rem*60;
            background:#d72d10;
            border-radius:$rem*50;
            margin-top: $rem*17;
            display: inline-block;
            overflow: hidden;
            &>span{
               height: $rem*16;
               width:$rem*16;
               border-radius:50%;
               margin-right:$rem*15;
               float: left;
               background:rgba(255,255,255,.4);

               &.swiper-pagination-bullet-active{
                background:#fff;
               }
            }
        }
    }
    &-item{
        background:#f04528;
    }
}

.ws-android{
    .swiper-wrapper{
        white-space: nowrap;
        .swiper-slide{
            display: inline-block;
        }
    }
}

@include column('.buy-detail-',3,$rem*8);
